<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<script type="text/javascript">
	function myFunction(obj) {
		var id = $(obj).parent().parent().find(".id_fild").prop('value');
		var firstname = $(obj).parent().parent().find(".firstname_fild").text();
		var lastname = $(obj).parent().parent().find(".lastname_fild").text();
		var phone = $(obj).parent().parent().find(".phone_fild").text();
		var email = $(obj).parent().parent().find(".email_fild").text();
		var active = $(obj).parent().parent().find(".active_fild").text();
		

		$("#id").prop('value', id);
		$("#firstname").prop('value', firstname);
		$("#lastname").prop('value', lastname);
		$("#phone").prop('value', phone);
		$("#email").prop('value', email);
		$("#active").prop('value', active);

	}
</script>

<c:if test="${!empty clients}">
	<h1>Clients</h1>


	<div class="modal fade" id="editModal">
		<div class="modal-dialog" style="width: 350px;">

			<form method="post" action="users/edit">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Edit Profile</h4>
					</div>
					<div class="modal-body">
						<br /> <input type="hidden" value="" name="idClient" id="id" />
						<input id="firstname" type="text" class="form-control" value=""
							name="firstname" placeholder='firstname' /> <br /> <input
							id="lastname" type="text" class="form-control" value=""
							name="lastname" placeholder='lastname' /> <br /> <input
							id="phone" type="text" class="form-control" value="" name="phone"
							placeholder='phone' /> <br />
							<input
							id="email" type="text" class="form-control" value="" name="email"
							placeholder='email' /> <br />
							<select id="active" class="form-control" name="active">
							<option value="" selected="selected" disabled>Select
								service type</option>
							<option>true</option>
							<option>false</option>
						</select>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
						<input type="submit" class="btn btn-primary" value="Save" />
					</div>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>

	<table class="table table-hover">
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Phone</th>
			<th>Email</th>
			<th>Active</th>
			<th>Action</th>
		</tr>
		<c:forEach items="${clients}" var="user">
			<tr>
				<td class="firstname_fild">${user.firstname}</td>
				<td class="lastname_fild">${user.lastname}</td>
				<td class="phone_fild">${user.phone}</td>
				<td class="email_fild">${user.email}</td>
				<td class="active_fild">${user.active}</td>

				<td><input type="hidden" class="id_fild"
						value=${user.id } /><button onclick="myFunction(this)"
						class="btn update btn-success edit" data-toggle="modal"
						data-target="#editModal">Edit</button> <a class="btn btn-danger"
					href='<c:url value="/users/delete/${user.id}"></c:url>'> Delete</a></td>

			</tr>
		</c:forEach>
	</table>
</c:if>
<c:if test="${empty clients}">
	<h3>No client</h3>
</c:if>
<br />
